/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-03-15 19:43:05
 *
 */
import React, {FC, useContext} from 'react';
import {Row, Col, Radio, Input,InputNumber,Slider,message} from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../../context';

const BasicOperate: FC<any> = ({children}) => {
    const {
        currentItem,
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        setCurrentItem,
        layoutParams
    } = useContext(FormContext);
    const {layout} = layoutParams;

    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };

    return (
        <Row>
            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={`${styles.itemName} ${styles.required}`}>标签名称:</span>
                    <Input
                        maxLength={60}
                        placeholder="请输入"
                        value={currentItem.label}
                        onChange={(e) => {
                            setValue('label', e.target.value);
                             // 控件名称必填
            if (!e.target.value) {
                message.error('请填写控件名称');
                return null;
            }
                        }}
                    />
                </div>
            </Col>
            {/* 字段名称 */}
            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>字段名称:</span>
                    <Input
                        placeholder="请输入"
                        value={currentItem.name}
                        onChange={(e) => {
                            setValue('name', e.target.value);
                        }}
                    />
                </div>
            </Col>
            {/* 不同组件独有配置项 */}
            {children}

            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>是否必填:</span>
                    <Radio.Group
                        options={[
                            {label: '是', value: true},
                            {label: '否', value: false},
                        ]}
                        value={currentItem.required}
                        onChange={(e) => {
                            setValue('required', e.target.value);
                        }}
                    />
                </div>
            </Col>
            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>文本框的可编辑性:</span>
                    <Radio.Group
                        options={[
                            {label: '是', value: false},
                            {label: '否', value: true},
                        ]}
                        value={currentItem.disabled}
                        onChange={(e) => {
                            setValue('disabled', e.target.value);
                        }}
                    />
                </div>
            </Col>
            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>元素宽度:</span>
                    <Slider
                        style={{width: '70%'}}
                        value={currentItem.colSpan || 100}
                        tooltip={{formatter: (value) => `${value}%`}}
                        max={100}
                        min={1}
                        onChange={(value) => {
                            setValue('colSpan', value);
                        }}
                    />
                    <InputNumber
                        formatter={(value) => `${value}%`}
                        value={currentItem.colSpan || 100}
                        style={{width: '28%', marginLeft: '10px'}}
                        max={100}
                        min={0}
                        precision={0}
                        onChange={(value) => {
                            setValue('colSpan', value);
                        }}
                    />
                </div>
            </Col>
            {layout === 'horizontal' && (
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>标签宽度:</span>
                        <Slider
                            style={{width: '70%'}}
                            value={currentItem.labelSpan || 110}
                            max={400}
                            min={110}
                            tooltip={{formatter: (value) => `${value}px`}}
                            onChange={(value) => {
                                setValue('labelSpan', value);
                            }}
                        />
                        <InputNumber
                            formatter={(value) => `${value}px`}
                            style={{width: '28%', marginLeft: '10px'}}
                            value={currentItem.labelSpan || 110}
                            max={400}
                            min={110}
                            precision={0}
                            onChange={(value) => {
                                setValue('labelSpan', value);
                            }}
                        />
                    </div>
                </Col>
            )}
            {/* <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>是否作为条件查询:</span>
                    <Radio.Group
                        options={[
                            {label: '是', value: true},
                            {label: '否', value: false},
                        ]}
                        value={currentItem.isSearch}
                        onChange={(e) => {
                            setValue('isSearch', e.target.value);
                        }}
                    />
                </div>
            </Col>
            <Col span={24}>
                <div className={styles.operateItem}>
                    <span className={styles.itemName}>
                        是否作为业务数据统计显示在列表:
                    </span>
                    <Radio.Group
                        options={[
                            {label: '是', value: true},
                            {label: '否', value: false},
                        ]}
                        value={currentItem.isShowInTable}
                        onChange={(e) => {
                            setValue('isShowInTable', e.target.value);
                        }}
                    />
                </div>
            </Col> */}
        </Row>
    );
};

export default BasicOperate;
